<template>
	<div style="margin-top: 40px" v-if="props.modelValue">
		<el-row :gutter="24" :style="rowStyle" style="background: #212334;">
			<el-col :span="2">
				<div class="flex-aic">选择</div>
			</el-col>
			<el-col :span="4">任务序列号</el-col>
			<el-col :span="6">任务名称</el-col>
			<el-col :span="6">任务类型</el-col>
			<el-col :span="6">任务栏状态(任务进度追踪)</el-col>
		</el-row>
		<el-row :gutter="24" :style="rowStyle" v-for="item in list" :key="item.id" style="background: #11142C; margin: 1px 0">
			<el-col :span="2">
				<el-radio :value="item.id" v-model="radio"></el-radio>
			</el-col>
			<el-col :span="4">{{ item.index }}</el-col>
			<el-col :span="6">{{ item.name }}</el-col>
			<el-col :span="6">{{ item.type }}</el-col>
			<el-col :span="6">{{ taskProgress }}%</el-col>
		</el-row>
		<el-button type="primary" style="margin-top: 22px;" @click="enter" :disabled="!radio">进入测评</el-button>
	</div>
</template>
<script setup>
import {ref, defineProps, defineEmits, watch, computed} from 'vue'
import useTaskStore from '@/stores/task.js'

const userStore = useTaskStore()

const taskProgress = computed(()=> {
	return userStore.taskProgress
})

const rowStyle = {
	height: '46px',
	alignItems: 'center',
	width: '100%',
	margin: '0'
}
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	}
})

const list = ref([
	{index: 1, id: 1, name: '测评任务1', type: '多模态测评', status: '未开始'},
])

const emits = defineEmits(['update:modelValue'])


const radio = ref('')

const enter = ()=> {
	emits('update:modelValue', false)
}

</script>
<style scoped lang="scss">

</style>